<template>
  <div class="son" style="border: 3px solid #000; margin: 10px">
    我是Son组件 {{ title }} ====={{ name }}===={{ n }}
    <button @click="changeFn">修改title</button>
    <button @click="changeName">修改name ===父组件修改</button>
    <button @click="changeN">修改n === 子组件直接修改</button>
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  props: ['title', 'name', 'n'],
  methods: {
    changeFn () {
      // 通过this.$emit() 向父组件发送通知
      this.$emit('changTitle', '传智教育')
    },
    changeName () {
      this.$emit('changeName', '帅帅是无敌的')
    },
    changeN () {
      this.$emit('update:n', 222)
    }
  },
}
</script>

<style>
</style>